<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="googleMaps" tagdir="/WEB-INF/tags/googlemaps"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
var changeMapCenter = function(){};
</script>
<googleMaps:Script />
<div id="results" class="results">
    <div id="search-form" class="form">
        <s:form action="findInstitutions">
            <s:select name="delta" list="%{map}"/>
            <s:hidden name="id" value="%{pacient.id}"></s:hidden> 
            <s:submit value="buscar" />
        </s:form>
    </div>
	<div id="results-list" class="list">
		<ul class="results-list">
		    <c:if test="${empty institutions}">
		      El paciente no tiene instituciones tan cercanas
		     </c:if>
		     <c:if test="${!empty institutions}">
			     <s:iterator value="institutions">
			 	   <li><a onclick="changeMapCenter(new googleMaps.LatLng(<s:property value="location.latitude" />,<s:property value="location.longitude" />))"><s:property value="name" /></a></li>
			     </s:iterator>
			</c:if>
		</ul>
	</div>
	<div id="results-map" class="map" style="width:500px;height:400px"></div>
	<div style="clear:both"></div>
	
	
	<s:set var="pacient" value="pacient" scope="request" />
    <googleMaps:Map container_id="results-map" latitude="${pacient.location.latitude}" longitude="${pacient.location.longitude}" zoom="14">
        <googleMaps:Marker index="0" longitude="${pacient.location.longitude}" latitude="${pacient.location.latitude}" title="${pacient.name}" icon="images/pacient.png">
                <h3>Paciente <s:property value="pacient.name" /> <s:property value="pacient.lastname" /> </h3>
                <p>
                    <strong>Dirección:</strong> <s:property value="pacient.location.street" /> n°<s:property value="pacient.location.number" />, <s:property value="pacient.location.city" />, <s:property value="pacient.location.province" /> 
                </p>
        </googleMaps:Marker>
        <s:iterator value="institutions" var="institution" status="st">
            <s:set var="institution" value="institution" scope="request" />
            <s:set var="index" value="#st.index" scope="request" />
            <googleMaps:Marker index="${index+1}" longitude="${institution.location.longitude}" latitude="${institution.location.latitude}" title="${institution.name}" icon="images/hospital.png">
                <h3><s:property value="name" /></h3>
                <p>
                    <s:property value="detail" />
                </p>
                <p>
                    <s:property value="location.street"/> <s:property value="location.number"/>, <s:property value="location.city"/>, <s:property value="location.province"/>
                </p>
                <p>
                    <strong>e-mail:</strong><s:property value="email" />
                    <strong>tel:</strong><s:property value="phoneNumbers" />
                </p>
            </googleMaps:Marker>            
        </s:iterator>
        changeMapCenter = function (latLng){
            map.setCenter(latLng);
        }
    </googleMaps:Map>	
</div>

